/**
 * 首先,React中没有指令系统.
 *
 * 条件渲染(v-if)
 *    1. 使用 三元表达式
 *      {isShow ? <p>控制我的显示隐藏</p> : null}
 *    2. 使用 &&
 *      {isShow && <p>控制我的显示隐藏</p>}
 * 条件显影(v-show)
 *    1. 控制 style 就好了
 *
 * 列表渲染(v-for)
 *    1. map
 */

import React from "react";

const isShow = false;

const fruits = ["Apple", "Banana", "Orange"];
// const fruitsEl = [
//   <li key="0">Apple</li>,
//   <li key="1">Banana</li>,
//   <li key="2">Orange</li>,
// ];

const fruitsEl = fruits.map((item, index) => <li key={index}>{item}</li>);

class App extends React.Component {
  render(): React.ReactNode {
    return (
      <div>
        <h1>条件渲染</h1>

        <p style={{ display: isShow ? "block" : "none" }}>控制我的显示隐藏</p>
        <hr />

        {/* <ul>{fruitsEl}</ul> */}

        <ul>
          {fruits.map((item, index) => (
            <li key={index}>{item}</li>
          ))}
        </ul>
      </div>
    );
  }
}

export default App;
